<template>
    <web-view
        v-if="webviewSrc"
        :src="webviewSrc"
        ref="webview"
        class="custom-webview"
        @onPostMessage="handlePostMessage"
        @message="handleMessage"></web-view>
    <view class="no-data" v-if="!webviewSrc">
        <img class="no-data-img" :src="getImgOssUrl('/ui-prod-2.0.0/nodata_1.1.png')" />
        <text class="no-data-title">页面加载中...</text>
    </view>
</template>

<script setup>
import { ref, computed } from 'vue';
import { onShow, onHide } from '@dcloudio/uni-app';
import router from '@/router';
import request from '@/request';
import { getImgOssUrl } from '@/commons/utils.js';

const props = defineProps({
    type: {
        type: [String],
        default: 'password'
    }
});

// webview
const webviewRef = ref();
let webviewSrc = ref();
const handleMessage = event => {
    // console.log('handleMessage', event);
};
const handlePostMessage = event => {
    // todo:监听webview消息通知
    // event.detail.data
    // console.log('event.detail.data', event.detail.data, event.detail, event);
    // router.back();
    // webviewSrc.value = '';
    // webviewRef?.value?.bfCloseH5();
};

const getWebview = async () => {
    // 跳转授权页
    if (props.type === 'password') {
        const { data } = await request('passwordUrl');
        webviewSrc.value = data?.redirectUrl + '?Address=' + '/pages-user/balanceCash/cash/tocard';
    } else {
        const { data } = await request('authorizationUrl', {
            callType: 'SIGN_WITHDRAW_ENTRUST'
        });
        webviewSrc.value = data?.redirectUrl + '?Address=' + '/pages-user/balanceCash/cash/tocard';
    }
};

onShow(() => {
    webviewSrc.value = '';
    uni.setNavigationBarTitle({ title: props.type === 'password' ? '设置密码' : '委托提现授权' });
    getWebview();
});
</script>

<style lang="scss" scoped>
.custom-webview-main {
    width: 100vw !important;
    max-width: 100vw;
    height: 100vh !important;
}
.custom-webview {
    width: 100vw !important;
    max-width: 100vw;
    height: 100vh !important;
}
.no-data {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}
.no-data-img {
    width: 278rpx;
    height: 160rpx;
    margin: 312rpx 0 24rpx 0;
}
.no-data-title {
    color: #333333;

    font-size: 28rpx;
    font-weight: 400;
    line-height: 34rpx;
}
</style>
